<template>
    <div class="header" style="margin-bottom: 20px;">
        <div class="navbar bg-base-100">
            <div class="flex-1">
                <a class="btn btn-ghost normal-case text-xl">LSR</a>
            </div>
            <div class="flex-none">

                <div class="dropdown dropdown-end">
                    <label tabindex="0" class="btn btn-ghost btn-circle avatar">
                        <div class="w-10 rounded-full">
                            <img :src="head" />
                        </div>
                    </label>
                    <ul tabindex="0"
                        class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
                        <li>
                            <label class="justify-between" for="my-modal">
                                <label for="my-modal">切换头像</label>
                                <span class="badge">New</span>
                            </label>
                        </li>
                        <li @click="logout"><a>登出</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <input type="checkbox" id="my-modal" class="modal-toggle" />
        <div class="modal">
            <div class="modal-box">
                <h3 class="font-bold text-lg">设置管理员头像</h3>
                <p class="py-4">
                    <input type="file" class="file-input w-full max-w-xs" style="margin-top: 30px;"
                        @change="onFileChange" />
                </p>
                <div class="modal-action">
                    <label for="my-modal" class="btn" @click="cancelChange">取消</label>
                    <label for="my-modal" class="btn" @click="changeHead">确定</label>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "MyHead",
    data() {
        return {
            head: '',
            selectedFile: '', //储存新上传的头像
        }
    },
    mounted() {
        this.GetHead()
    },
    methods: {
        GetHead() {
            //发送http到服务端获取admin头像
            this.$http.post('/admin/GetHead', {}, {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                }
            }).then(res => {
                console.log(res);
                if (res.data.code == 401) { //代码登陆已经过期了
                    this.$router.push("/")
                    return
                }
                this.head = res.data.head
            }).catch(err => {
                console.log(err)
            })
        },
        logout() { //实现账号注销
            // 清除localstorage admin_toekn admin_email
            localStorage.removeItem('admin_token')
            localStorage.removeItem('admin_email')
            this.$router.push("/") //返回到登陆页面
        },
        onFileChange(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.selectedFile = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        },
        cancelChange() { //取消切换头像
            this.selectedFile = ''
        },
        changeHead() { //实现切换图像
            // 创建一个新的 FormData 实例
            let formData = new FormData();
            // 添加 'head' 文件到 FormData 实例
            formData.append('head', this.selectedFile);

            // 设置请求配置
            let config = {
                headers: {
                    'Authorization': "Bearer " + localStorage.getItem("admin_token")
                }
            };
            // 发送 POST 请求
            this.$http.post('/admin/changeHead', formData, config)
                .then(res => {
                    if (res.data.code == 401) { //代码登陆已经过期了
                        this.$router.push("/")
                        return
                    }
                    this.head = this.selectedFile;
                    this.selectedFile = '';
                }).catch(err => {
                    console.log(err);
                })
        }
    }
}
</script>

<style scoped>
.header {
    width: 84%;
    height: 9vh;
    border-radius: 10px;
    position: absolute;
    right: 5px;
    float: right;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
</style>